<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>评论</title>
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        .commentShow {
            list-style: none;
            font-size: 13px;
            border-top: 1px dashed #eee;
        }

        .qqFace {
            margin-top: 4px;
            background: #fff;
            padding: 2px;
            border: 1px #dfe6f6 solid;
        }

        .qqFace table td {
            padding: 0px;
        }

        .qqFace table td img {
            cursor: pointer;
            border: 1px #fff solid;
        }

        .qqFace table td img:hover {
            border: 1px #0066cc solid;
        }

        .sub_btn {
            float: right;
	        right: 0px;
	        top: 0;
	        display: inline-block;
	        zoom: 1;
	        /* zoom and *display = ie7 hack for display:inline-block */
	        *display: inline;
	        vertical-align: baseline;
	        margin-left: 50px;
            outline: none;
            cursor: pointer;
            text-align: center;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            color: #e8f0de;
            border: solid 1px #538312;
            background: #64991e;
            background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
            background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
        }

        .sub_btn:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top, #6b9d28, #436b0c);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }
    </style>
    <script src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qqFace.js"></script>
    <script type="text/javascript" src="doT.min.js"></script>
    <script id="commentTmpl" type="text/x-dot-template">
    	{{ for(var i=0;i<it.length;i++){ }}
			<li class="commentShow">
	            <div>
	                <div>
	                    <span style="color:#09C;">{{=it[i].user}}:</span>
	                </div>
	                <div style="margin-left:20px;">
	                    <p>
	                        {{=replace_em(it[i].context)}}
	                    </p>
	                </div>
	                <div style="margin-left:20px;">
	                    <span style="color:#aaa;">{{=it[i].time}}</span>
	                </div>
	            </div>
	        </li>
    	{{ } }}
    </script>
    <script type="text/javascript">
        $(function () {
            $('.emotion').qqFace({
                id: 'facebox',
                assign: 'commentText',
                path: 'arclist/' //表情存放的路径
            });
            $(".sub_btn").click(function () {
            	$.ajax({
            		url:'/zjabank/server/comment/publish?inputUser=admin',
            		type:'post',
            		dataType:'json',
            		data:{commentText:$('#commentText').val(),id:${id}}
            	}).done(function(data){
            		$('#commentText').val('');
            		var commentInit = doT.template($("#commentTmpl").html());
            		$("#commentBody").append(commentInit(data));
            	});
            });
            $.ajax({
            	url:'/zjabank/server/comment/list/${id}',
            	dataType:'json',
            	type:'get',
            	cache:false
            }).done(function(data){
	            var commentInit = doT.template($("#commentTmpl").html());
				$("#commentBody").html(commentInit(data));
            });
        });
        //查看结果
        function replace_em(str) {
            str = str.replace(/\</g, '&lt;');
            str = str.replace(/\>/g, '&gt;');
            str = str.replace(/\n/g, '<br/>');
            str = str.replace(/\[em_([0-9]*)\]/g, '<img src="arclist/$1.gif" border="0" />');
            return str;
        }
    </script>
</head>
<body>
<div style="margin:0 auto;width:700px;">
	<input type="text" value="${id}">
    <ol id="commentBody">
    </ol>
    <div>
        <textarea name="commentText" id="commentText" style="width:100%;height:100px;"></textarea>
        <br>
        <a href="#" class="emotion"><img src="arclist/1.gif" alt=""></a>
        <input type="button" class="sub_btn" value="提交">
    </div>
</div>
</body>
</html>